<template>
  <view>
      <text style="text-align: center;display: block">二维码有效期为{{qRExpireTime}}秒</text>
      <image v-if="isShow" style="display:block;margin: 0 auto;width: 460rpx;height: 460rpx" mode="widthFix" :src="src"></image>

    <view style="width:460rpx;height:70rpx;margin-left: auto;margin-right: auto;">
<!--      <u-button  style="width:460rpx;height:70rpx;margin-left: auto;margin-right: auto;" text="刷新"></u-button>-->
      <view class="refresh" @click="reloadQr">
        <u-icon name="reload"></u-icon>
        刷新</view>
    </view>
  </view>
</template>

<script>
import {BASE_URL} from "../../api/service";
export default {
  name: "QRCode",
  props:["content"],
  data(){
    return{
      src:'',
      qRExpireTime:uni.getStorageSync('userInfo').configs.qRExpireTime.value,
      isShow:true,
    }
  },
  methods:{
    reloadQr(){
      // 移除组件
      this.isShow = false
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  },
  created(){
    this.src =BASE_URL+'/qr/createQRCode?content='+this.content.join(',')
  },
  watch: {
    content:{
      handler(val) {
        console.log(val)
        this.src =BASE_URL+'/qr/createQRCode?content='+val.join(',')
      },
      deep: true,
      immediate: true
    }
  },

}
</script>

<style scoped>
.resImg {
  display: block;
  width: 460rpx;
  height: 460rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  margin-right: auto;
  margin-left: auto;
}
.res_title{
  text-align: center;
  /*font-weight: 600;*/
  font-size: 32rpx;
  display: block;
}
.res_content{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 460rpx;
  height: 700rpx;
}
.refresh{
  width: 90rpx;
  margin-left: auto;
  margin-right: auto;
  line-height: 40rpx;
}
</style>
